Node / ReticulumProjects / MeshChatX.git / files / meshchatx / src / frontend / components / messages / AddImageButton.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD AND MIT -->

Tb4b4b4<Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"inline-flex"Tb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3typeTff7b72=Ta5d6ff"button"

Te6edf3classTff7b72=Ta5d6ff"my-auto inline-flex items-center gap-x-1 rounded-full border border-gray-200 dark:border-zinc-700 bg-white/90 dark:bg-zinc-900/80 px-3 py-1.5 text-xs font-semibold text-gray-800 dark:text-gray-100 shadow-xs hover:border-blue-400 dark:hover:border-blue-500 transition"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3showMenuTa5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"image-plus" Te6edf3classTff7b72=Ta5d6ff"w-4 h-4" Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tff7b72span Te6edf3classTff7b72=Ta5d6ff"hidden xl:inline-block whitespace-nowrap"Tb4b4b4>Add ImageTb4b4b4<Tb4b4b4/Tff7b72spanTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"relative block"Tb4b4b4>

Tb4b4b4<Tff7b72Transition

Te6edf3enter-active-classTff7b72=Ta5d6ff"transition ease-out duration-100"

Te6edf3enter-from-classTff7b72=Ta5d6ff"transform opacity-0 scale-95"

Te6edf3enter-to-classTff7b72=Ta5d6ff"transform opacity-100 scale-100"

Te6edf3leave-active-classTff7b72=Ta5d6ff"transition ease-in duration-75"

Te6edf3leave-from-classTff7b72=Ta5d6ff"transform opacity-100 scale-100"

Te6edf3leave-to-classTff7b72=Ta5d6ff"transform opacity-0 scale-95"

Tb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3isShowingMenuTa5d6ff"

Te6edf3v-click-outsideTff7b72=Ta5d6ff"Te6edf3hideMenuTa5d6ff"

Te6edf3classTff7b72=Ta5d6ff"absolute bottom-0 -ml-11 sm:right-0 sm:ml-0 z-10 mb-10 rounded-xl bg-white dark:bg-zinc-900 shadow-lg ring-1 ring-gray-200 dark:ring-zinc-800 focus:outline-hidden"

Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"py-1"Tb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3typeTff7b72=Ta5d6ff"button"

Te6edf3classTff7b72=Ta5d6ff"w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrap"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3addImageTb4b4b4(Ta5d6ff'low'Tb4b4b4)Ta5d6ff"

Tb4b4b4>

Low Quality (320x320)

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3typeTff7b72=Ta5d6ff"button"

Te6edf3classTff7b72=Ta5d6ff"w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrap"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3addImageTb4b4b4(Ta5d6ff'medium'Tb4b4b4)Ta5d6ff"

Tb4b4b4>

Medium Quality (640x640)

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3typeTff7b72=Ta5d6ff"button"

Te6edf3classTff7b72=Ta5d6ff"w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrap"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3addImageTb4b4b4(Ta5d6ff'high'Tb4b4b4)Ta5d6ff"

Tb4b4b4>

High Quality (1280x1280)

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3typeTff7b72=Ta5d6ff"button"

Te6edf3classTff7b72=Ta5d6ff"w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrap"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3addImageTb4b4b4(Ta5d6ff'original'Tb4b4b4)Ta5d6ff"

Tb4b4b4>

Original Quality

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72TransitionTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

T8b949e<!-- hidden file input for selecting files -->

Tb4b4b4<Tff7b72input Te6edf3refTff7b72=Ta5d6ff"image-input" Te6edf3typeTff7b72=Ta5d6ff"file" Te6edf3acceptTff7b72=Ta5d6ff"image/*" Te6edf3styleTff7b72=Ta5d6ff"display: none" Tb4b4b4@Te6edf3changeTff7b72=Ta5d6ff"Te6edf3onImageInputChangeTa5d6ff" Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72scriptTb4b4b4>

Tff7b72import Te6edf3Compressor Tff7b72from Ta5d6ff"compressorjs"Tb4b4b4;

Tff7b72import Te6edf3DialogUtils Tff7b72from Ta5d6ff"../../js/DialogUtils"Tb4b4b4;

Tff7b72import Te6edf3MaterialDesignIcon Tff7b72from Ta5d6ff"../MaterialDesignIcon.vue"Tb4b4b4;

Tff7b72export Tff7b72default Tb4b4b4{

Te6edf3nameTff7b72: Ta5d6ff"AddImageButton"Tb4b4b4,

Te6edf3componentsTff7b72: Tb4b4b4{

Te6edf3MaterialDesignIconTb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3emitsTff7b72: Tb4b4b4[Ta5d6ff"add-image"Tb4b4b4]Tb4b4b4,

Te6edf3dataTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72return Tb4b4b4{

Te6edf3isShowingMenuTff7b72: Tff7b72falseTb4b4b4,

Te6edf3selectedImageQualityTff7b72: Tff7b72nullTb4b4b4,

Tb4b4b4}Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3methodsTff7b72: Tb4b4b4{

Te6edf3showMenuTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3isShowingMenu Tff7b72= Tff7b72trueTb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3hideMenuTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3isShowingMenu Tff7b72= Tff7b72falseTb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3addImageTb4b4b4(Te6edf3qualityTb4b4b4) Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3isShowingMenu Tff7b72= Tff7b72falseTb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3selectedImageQuality Tff7b72= Te6edf3qualityTb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4[Ta5d6ff"image-input"Tb4b4b4]Tb4b4b4.Te6edf3clickTb4b4b4(Tb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3clearImageInputTff7b72: Tff7b72function Tb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4[Ta5d6ff"image-input"Tb4b4b4]Tb4b4b4.Te6edf3value Tff7b72= Tff7b72nullTb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3onImageInputChangeTff7b72: Tff7b72async Tff7b72function Tb4b4b4(Te6edf3eventTb4b4b4) Tb4b4b4{

Tff7b72if Tb4b4b4(Te6edf3eventTb4b4b4.Te6edf3targetTb4b4b4.Te6edf3filesTb4b4b4.Te6edf3length Tff7b72> T79c0ff0Tb4b4b4) Tb4b4b4{

T8b949e// get selected file

Tff7b72const Te6edf3file Tff7b72= Te6edf3eventTb4b4b4.Te6edf3targetTb4b4b4.Te6edf3filesTb4b4b4[T79c0ff0Tb4b4b4]Tb4b4b4;

T8b949e// process file based on selected image quality

Tff7b72switch Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3selectedImageQualityTb4b4b4) Tb4b4b4{

Tff7b72case Ta5d6ff"low"Tff7b72: Tb4b4b4{

Tff7b72new Te6edf3CompressorTb4b4b4(Te6edf3fileTb4b4b4, Tb4b4b4{

Te6edf3maxWidthTff7b72: T79c0ff320Tb4b4b4,

Te6edf3maxHeightTff7b72: T79c0ff320Tb4b4b4,

Te6edf3qualityTff7b72: T79c0ff0.2Tb4b4b4,

Te6edf3mimeTypeTff7b72: Ta5d6ff"image/webp"Tb4b4b4,

Te6edf3successTff7b72: Tb4b4b4(Te6edf3resultTb4b4b4) Tb4b4b4=> Tb4b4b4{

T8b949e// ensure result is a File with the same name as original

Tff7b72const Te6edf3compressedFile Tff7b72= Tff7b72new Te6edf3FileTb4b4b4(Tb4b4b4[Te6edf3resultTb4b4b4]Tb4b4b4, Te6edf3fileTb4b4b4.Te6edf3nameTb4b4b4, Tb4b4b4{ Te6edf3typeTff7b72: Te6edf3resultTb4b4b4.Te6edf3type Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3$emitTb4b4b4(Ta5d6ff"add-image"Tb4b4b4, Te6edf3compressedFileTb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3errorTff7b72: Tb4b4b4(Te6edf3errTb4b4b4) Tb4b4b4=> Tb4b4b4{

Te6edf3DialogUtilsTb4b4b4.Te6edf3alertTb4b4b4(Te6edf3errTb4b4b4.Te6edf3messageTb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tff7b72breakTb4b4b4;

Tb4b4b4}

Tff7b72case Ta5d6ff"medium"Tff7b72: Tb4b4b4{

Tff7b72new Te6edf3CompressorTb4b4b4(Te6edf3fileTb4b4b4, Tb4b4b4{

Te6edf3maxWidthTff7b72: T79c0ff640Tb4b4b4,

Te6edf3maxHeightTff7b72: T79c0ff640Tb4b4b4,

Te6edf3qualityTff7b72: T79c0ff0.6Tb4b4b4,

Te6edf3mimeTypeTff7b72: Ta5d6ff"image/webp"Tb4b4b4,

Te6edf3successTff7b72: Tb4b4b4(Te6edf3resultTb4b4b4) Tb4b4b4=> Tb4b4b4{

T8b949e// ensure result is a File with the same name as original

Tff7b72const Te6edf3compressedFile Tff7b72= Tff7b72new Te6edf3FileTb4b4b4(Tb4b4b4[Te6edf3resultTb4b4b4]Tb4b4b4, Te6edf3fileTb4b4b4.Te6edf3nameTb4b4b4, Tb4b4b4{ Te6edf3typeTff7b72: Te6edf3resultTb4b4b4.Te6edf3type Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3$emitTb4b4b4(Ta5d6ff"add-image"Tb4b4b4, Te6edf3compressedFileTb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3errorTff7b72: Tb4b4b4(Te6edf3errTb4b4b4) Tb4b4b4=> Tb4b4b4{

Te6edf3DialogUtilsTb4b4b4.Te6edf3alertTb4b4b4(Te6edf3errTb4b4b4.Te6edf3messageTb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tff7b72breakTb4b4b4;

Tb4b4b4}

Tff7b72case Ta5d6ff"high"Tff7b72: Tb4b4b4{

Tff7b72new Te6edf3CompressorTb4b4b4(Te6edf3fileTb4b4b4, Tb4b4b4{

Te6edf3maxWidthTff7b72: T79c0ff1280Tb4b4b4,

Te6edf3maxHeightTff7b72: T79c0ff1280Tb4b4b4,

Te6edf3qualityTff7b72: T79c0ff0.75Tb4b4b4,

Te6edf3mimeTypeTff7b72: Ta5d6ff"image/webp"Tb4b4b4,

Te6edf3successTff7b72: Tb4b4b4(Te6edf3resultTb4b4b4) Tb4b4b4=> Tb4b4b4{

T8b949e// ensure result is a File with the same name as original

Tff7b72const Te6edf3compressedFile Tff7b72= Tff7b72new Te6edf3FileTb4b4b4(Tb4b4b4[Te6edf3resultTb4b4b4]Tb4b4b4, Te6edf3fileTb4b4b4.Te6edf3nameTb4b4b4, Tb4b4b4{ Te6edf3typeTff7b72: Te6edf3resultTb4b4b4.Te6edf3type Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3$emitTb4b4b4(Ta5d6ff"add-image"Tb4b4b4, Te6edf3compressedFileTb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3errorTff7b72: Tb4b4b4(Te6edf3errTb4b4b4) Tb4b4b4=> Tb4b4b4{

Te6edf3DialogUtilsTb4b4b4.Te6edf3alertTb4b4b4(Te6edf3errTb4b4b4.Te6edf3messageTb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tff7b72breakTb4b4b4;

Tb4b4b4}

Tff7b72case Ta5d6ff"original"Tff7b72: Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3$emitTb4b4b4(Ta5d6ff"add-image"Tb4b4b4, Te6edf3fileTb4b4b4)Tb4b4b4;

Tff7b72breakTb4b4b4;

Tb4b4b4}

Tff7b72defaultTff7b72: Tb4b4b4{

Te6edf3DialogUtilsTb4b4b4.Te6edf3alertTb4b4b4(Ta5d6ff`Ta5d6ffUnsupported image quality: Tffd700${Tff7b72thisTb4b4b4.Te6edf3selectedImageQualityTffd700}Ta5d6ff`Tb4b4b4)Tb4b4b4;

Tff7b72breakTb4b4b4;

Tb4b4b4}

Tb4b4b4}

T8b949e// clear image input to allow selecting the same file after user removed it

Tff7b72thisTb4b4b4.Te6edf3clearImageInputTb4b4b4(Tb4b4b4)Tb4b4b4;

Tb4b4b4}

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4;

Tb4b4b4<Tb4b4b4/Tff7b72scriptTb4b4b4>